<template>
	<view class="main-content">
		<view class="table-content" v-if="records.length">
			<view class="hintInfo" v-if="pullDown">————下拉获取信息————</view>
			<view v-else class="list-item-wrapper" v-bind:id="index" :style="onlineStyle[index]" v-for="(item,index) in records" :key="index">
				<navigator :url="'./recordList?item='+ encodeURIComponent(JSON.stringify(item))">
					<view style="padding: 10rpx;">
						<u-section :show-line="false" title=" " :sub-title="'查看扫码记录'"></u-section>
						<view class="list-item">
							<text>员工工号</text>
							<text>{{item.jobNumber}}</text>
						</view>
						<view class="list-item">
							<text>扫码记录总数</text>
							<text>{{item.list.length}}</text>
						</view>
					</view>
				</navigator>
			</view>
		</view>
		<view style="margin-top: 20rpx;" v-else>
			<u-empty mode="data"></u-empty>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import { findPlanUserScan, savePlanUserScan,accessPersonInfo } from '../../../utils/index.js'
	export default {
		data() {
			return {
				records: [],							//异常报警信息表单
				pullDown: true,							//使能当前页面的下拉刷新功能
				isfirst: true,
				listQuery: {
				    sectionNo: ''
				},
			}
		},
		methods: {
			//获取员工扫码列表
			async checkInfo() {
				let query = Object.assign({},this.listQuery)
				const { data } = await findPlanUserScan(query)
				const errMsg = data.msg
				if(data.code == '1'){
					this.records = data.data
					this.pullDown = false
					this.isfirst = false
				} else {
					this.$refs.uTips.show({
						title: errMsg,
						type: 'warning',
						duration: '2000'
					})
				}
			},
			change(index) {
				this.current = index;
			},
			// 下拉刷新,即调用查询按钮绑定的函数
			onPullDownRefresh() {
				this.checkInfo()
				setTimeout(function() {
					uni.stopPullDownRefresh()
				},2000)
			},
		},
		// 进入页面获取员工的信息
		onLoad(option) {
			this.listQuery.sectionNo = option.sectionNo
			this.checkInfo()
		},
		onShow() {
			if(this.isfirst) return
			this.checkInfo()
		}
	}
</script>

<style>
	.main-content {
		width: 100%;
	}
	.scroller {
		width: 100%;
		overflow: hidden;
	}
	.main-content ::v-deep .u-form {
		margin: 0rpx 10rpx;
		padding: 0rpx 10rpx;
	}
	#form-container ::v-deep .u-form-item {
		margin-top: 5rpx;
		padding: 5rpx 0rpx;
	}
	// 查询按钮样式
	.checkBtn {
		display: flex;
		justify-content: center;
	}
	// 排产返回的列表信息块外层包裹器
	.list-item-wrapper {
		margin: 20rpx;
		border-radius: 10rpx;
		background-color: #FFEFD5;
	}
	// 排产返回的列表信息块的样式
	.list-item {
		display: flex;
		justify-content: space-between;
		font-size: 16px;
		margin: 10rpx 10rpx;
	}
	// 上线下线按钮样式
	.operateBtn {
		display: flex;
		flex-wrap: nowrap;
	}
	.hintInfo {
		display: flex;
		justify-content: center;
		color: #E0E0E0;
	}
</style>
